<template>
  <div class="exam_box" v-loading="loading">
    <el-table
      :data="examDatas"
      border
      :header-row-style="{ color: '#232324', fontWeight: 'bold' }"
    >
      <el-table-column
        align="center"
        type="index"
        :index="indexMethod"
        label="序号"
        width="80"
      />
      <el-table-column
        align="center"
        label="考试名称"
        min-width="120"
        prop="examName"
      />
      <el-table-column
        align="center"
        label="课程名称"
        min-width="120"
        prop="courseName"
      />
      <el-table-column
        align="center"
        label="老师"
        min-width="120"
        prop="teacherName"
      />
      <el-table-column
        align="center"
        label="考试时间"
        min-width="180"
        prop="examDate"
      />
      <el-table-column
        align="center"
        label="考试时长min"
        min-width="120"
        prop="duration"
      />
      <el-table-column
        align="center"
        label="考试地点"
        min-width="120"
        prop="location"
      />
      <el-table-column
        align="center"
        label="考试描述"
        min-width="180"
        prop="description"
      />
      <el-table-column
        align="center"
        label="创建时间"
        min-width="180"
        prop="createTime"
      />
    </el-table>
    <el-pagination
      style="margin-top: 12px"
      v-model:current-page="examPageParmas.pageNum"
      v-model:page-size="examPageParmas.pageSize"
      :page-sizes="[10, 20, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { reqGetExamByTea } from '@/api/exam'
import { ExamPageQuery, ExamType } from '@/api/exam/type'

onMounted(async () => {
  await getExamInfoPage()
})

const examPageParmas: ExamPageQuery = reactive({
  pageNum: 1,
  pageSize: 10,
})
const examDatas = ref<ExamType[]>()
const total = ref(0)
const loading = ref(false)

// 添加菜单方法，id为 0则为添加根菜单

const getExamInfoPage = async () => {
  loading.value = true
  try {
    const { data } = await reqGetExamByTea(examPageParmas)
    examDatas.value = data.list
    total.value = data.total
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(error.message)
    }
  } finally {
    loading.value = false
  }
}

const indexMethod = (index: number) => {
  return index + (examPageParmas.pageNum - 1) * examPageParmas.pageSize + 1
}

// 修改菜单方法

const handleSizeChange = () => {
  getExamInfoPage()
}
const handleCurrentChange = () => {
  getExamInfoPage()
}
</script>
<style scoped lang="scss">
.exam_box {
  padding: 24px;
}
</style>
